<template>
  <view class="SummaryAnalysis">
    <Summary-Analysis-Item
      class="item"
      :style="{
        height: '230px'
      }"
      :title="userIdent ? '全县数据' : mIsbnCodeName + '数据'"
      :opts="optionCounty"
    />

    <Summary-Analysis-Item
      class="item"
      :style="{
        height: '230px'
      }"
      title="项目分类"
      :opts="optionProCategory"
    />

    <Summary-Analysis-Item
      class="item"
      :style="{
        height: '230px'
      }"
      title="资金来源"
      :opts="optionMoneySource"
    />

    <Summary-Analysis-Item
      class="item"
      :style="{
        height: '300px'
      }"
      title="镇执行率排名"
      :opts="optionRateRanking"
    >
      <template #header-right>
        <span class="item_button" @click="goDetail('zxl')">查看详情</span>
      </template>
    </Summary-Analysis-Item>

    <Summary-Analysis-Item
      class="item"
      :style="{
        height: '300px'
      }"
      title="各组项目资金排名"
    >
      <template #header-right>
        <span class="item_button" @click="goDetail('pm')">查看详情</span>
      </template>
      <template #default>
        <div>
          <Summary-Analysis-Table
            :colunnms="proMoneyRanking.colunnms"
            :table-data="proMoneyRanking.data"
          />
        </div>
      </template>
    </Summary-Analysis-Item>

    <u-loadmore style="padding-bottom: 10px;" status="nomore" />
  </view>
</template>

<script>
import SummaryAnalysisItem from 'pages/summaryAnalysis/componetns/SummaryAnalysisItem';
import SummaryAnalysisTable from 'pages/summaryAnalysis/componetns/SummaryAnalysisTable';
import { queryBodyByProduce } from '@/api/formview/index.js';
import { userIdent } from '@/utils/user.js';
import { getLocalStorage } from '@/utils/utils';

import {
  amountSlite
} from '@/utils/utils';
// const clickIndex = null;
export default {
  name: 'SummaryAnalysis',

  components: {
    SummaryAnalysisItem,
    SummaryAnalysisTable
  },

  data() {
    return {
      mIsbnCodeName: '',
      userIdent: false,
      // 全县数据
      countyData: {
        data: [],
        zxl: ''
      },

      // 项目分类
      proCategory: {
        data: []
      },

      // 资金来源
      moneySource: {
        data: []
      },

      // 镇执行率排名
      rateRanking: {
        data: []
      },

      // 各项目资金排名
      proMoneyRanking: {
        data: [],
        colunnms: [
          {
            title: '排名',
            dataIndex: 'myRate'
          },
          {
            title: '项目名称',
            dataIndex: 'myName',
            ellipse: true
          },
          {
            title: '总预算',
            dataIndex: 'myYs'
          },
          {
            title: '拨付金额',
            dataIndex: 'myBf'
          }
        ]
      }
    };
  },

  computed: {
    // 全县数据
    optionCounty() {
      return {
        tooltip: {
          trigger: 'item'
          // formatter: val => {
          //   return 'tooltip';
          // }
        },

        color: ['#999999', '#73A0FA', '#73DEB3'],
        legend: {
          orient: 'vertical',
          right: '10',
          bottom: '10',
          icon: 'circle',
          textStyle: {
            rich: {
              a: {
                color: '#666666',
                verticalAlign: 'top',
                align: 'left',
                fontSize: 14,
                padding: [25, 0, 0, 0]
              },
              b: {
                align: 'left',
                fontSize: 14,
                lineHeight: 25,
                color: '#666666'
              }
            }
          },
          formatter: (name) => {
            const data = this.countyData.data;
            let value;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name === name) {
                value = data[i].value;
              }
            }
            const arr = [
              '{a|' + name + ':' + '}',

              '{b|' + (name === '执行率' ? this.countyData.zxl : amountSlite(value)) + '}'
            ];
            return arr.join('\n');
          }
        },

        series: [
          {
            name: '全县数据',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['38%', '53%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              smooth: true,
              length: 5,
              length2: 13,
              minTurnAngle: 120,
              lineStyle: {
                dashOffset: 10,
                color: '#999999'
              }
            },
            data: this.countyData.data
          }
        ]
      };
    },

    // 项目分类
    optionProCategory() {
      return {
        color: ['#7585A2', '#73A0FA', '#73DEB3'],
        legend: {
          orient: 'vertical',
          right: '10',
          bottom: '10',
          icon: 'circle',
          textStyle: {
            rich: {
              a: {
                color: '#666666',
                verticalAlign: 'top',
                align: 'left',
                fontSize: 14,
                padding: [25, 0, 0, 0]
              },
              b: {
                align: 'left',
                fontSize: 14,
                lineHeight: 25,
                color: '#666666'
              }
            }
          },
          formatter: (name) => {
            const data = this.proCategory.data;
            let value;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name === name) {
                value = data[i].value;
              }
            }
            const arr = [
              '{a|' + name + ':' + '}',

              '{b|' + (name === '执行率' ? this.countyData.zxl : amountSlite(value)) + '}'
            ];
            return arr.join('\n');
          }
        },

        series: [
          {
            name: '全县数据',
            type: 'pie',
            radius: '70%',
            center: ['38%', '53%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              color: '#595959',
              formatter: function(e) {
                const {
                  data: {
                    value
                  }
                } = e;
                return value;
              }
            },
            data: this.proCategory.data
          }
        ]
      };
    },

    // 资金来源
    optionMoneySource() {
      return {
        color: ['#7585A2', '#73A0FA', '#73DEB3'],
        legend: {
          orient: 'vertical',
          right: '10',
          bottom: '10',
          icon: 'circle',
          textStyle: {
            rich: {
              a: {
                color: '#666666',
                verticalAlign: 'top',
                align: 'left',
                fontSize: 14,
                padding: [25, 0, 0, 0]
              },
              b: {
                align: 'left',
                fontSize: 14,
                lineHeight: 25,
                color: '#666666'
              }
            }
          },
          formatter: (name) => {
            const data = this.moneySource.data;
            let value;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name === name) {
                value = data[i].value;
              }
            }
            const arr = [
              '{a|' + name + ':' + '}',

              '{b|' + (name === '执行率' ? this.countyData.zxl : amountSlite(value)) + '}'
            ];
            return arr.join('\n');
          }
        },

        series: [
          {
            name: '全县数据',
            type: 'pie',
            radius: '70%',
            center: ['38%', '53%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              color: '#595959',
              formatter: function(e) {
                const {
                  data: {
                    value
                  }
                } = e;
                return value;
              }
            },
            data: this.moneySource.data
          }
        ]
      };
    },

    // 镇执行率排名
    optionRateRanking() {
      return {
        color: ['#5b8ff9', 'rgba(216,224,240,0.8)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        grid: {
          top: '20',
          left: '20',
          right: '12%',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          axisLabel: {
            interval: 0,
            fontSize: 12
          },
          type: 'category',
          data: this.rateRanking.data.map(item => item.name),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '执行率',
            type: 'bar',
            // stack: 'total',
            barWidth: 23,
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, // 是否显示
                  position: 'inner', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#fff',
                    fontSize: '12',
                    padding: [6, 0, 0, 3]
                  },
                  formatter: function(params) {
                    if (params.value) {
                      return params.value + `%`;
                    } else {
                      return '0%';
                    }
                  }
                }
              }
            },
            data: this.rateRanking.data.map(item => item.value)
          }
        ]
      };
    }

  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 是否是领导
      const flag = userIdent();
      const commonFilter = [
        { col: 'CENTERPRISECODE1', value: getLocalStorage('mIsbnCode') }
      ];

      const payload = { filterList: [] };

      if (!flag) {
        payload.filterList = commonFilter;
      }

      this.userIdent = flag;
      this.mIsbnCodeName = getLocalStorage('mIsbnCodeName');
      this.getCountyData(payload);
      this.getProCategory(payload);
      this.getMoneySource(payload);
      this.getRateRanking(payload);
      this.getProMoneyRanking(payload);
    },

    goDetail(type) {
      this.$router.push({
        path: '/SummaryAnalysisDetail',
        query: {
          type,
          filter: this.flag ? '' : `CENTERPRISECODE1,${getLocalStorage('mIsbnCode')}`
        }
      });
    },

    // 各项目资金排名
    getProMoneyRanking({ filterList }) {
      queryBodyByProduce(
        {
          'pageIndex': 0,
          'pageSize': 5,
          'pageType': 1,
          'tableId': 536,
          filterList: [...filterList]
        }
      ).then(res => {
        const data = res.data;
        if (Array.isArray(data) && data.length) {
          this.proMoneyRanking.data = data.map((item, i) => {
            return {
              ...item,
              myName: item.CPROGRAMNAME,
              myRate: i + 1,
              myYs: item.YSS,
              myBf: item.ZZFS,
              myZXL: item.ZXL
            };
          });
        }
      });
    },

    // 镇执行率排名
    getRateRanking() {
      queryBodyByProduce({
        'tableId': 531, 'doNotAddOtherFilter': true
      }).then(res => {
        const reg = /[0-9\.]/g;

        const data = res.data.reverse();

        if (Array.isArray(data) && data.length) {
          this.rateRanking.data = data.map(item => {
            const ZXL = item.ZXL;
            return {
              name: item.CENTERPRISENAME1,
              value: ZXL ? ZXL.match(reg).join('') * 1 : ''
            };
          });
        }
      });
    },

    // 项目分类
    getProCategory({ filterList }) {
      queryBodyByProduce({
        tableId: 535,
        filterList: [...filterList]
      }).then(res => {
        const data = res.data;
        if (Array.isArray(data) && data.length) {
          this.proCategory.data = data.map(item => {
            return {
              name: item.CPROGRAMTYPENAME,
              value: item.COUNT,
              CPROGRAMTYPECODE: item.CPROGRAMTYPECODE
            };
          });
        }
      });
    },

    // 全县数据
    getCountyData({ filterList }) {
      queryBodyByProduce({
        tableId: 532,
        filterList: [...filterList]
      }).then(res => {
        const data = res.data;
        if (Array.isArray(data) && data.length) {
          const info = data[0];

          // 总预算
          const zys = {
            name: '总预算',
            value: info.YSS * 1
          };
          // 总支付
          const zzf = {
            name: '总支付',
            value: info.ZZFS * 1
          };

          const zxl = {
            name: '执行率',
            value: ''
          };

          this.countyData.data = [zxl, zys, zzf];
          this.countyData.zxl = info.ZXL;
        }
      });
    },

    // 资金来源
    getMoneySource({ filterList }) {
      queryBodyByProduce({
        tableId: 581,
        filterList: [...filterList]
      }).then(res => {
        const data = res.data;
        if (Array.isArray(data) && data.length) {
          this.moneySource.data = data.map(item => {
            return {
              name: item.CRESOURCENAME,
              value: item.COUNT,
              CRESOURCECODE: item.CPROGRAMTYPECODE
            };
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.SummaryAnalysis {
  width: 100%;
  height: 100%;
  .item {
    margin: 20px 0;
  }

  .item_button {
    color: #666666;
  }

}
</style>
